<template>
  <div class="h-full" flex="cross:center">
    <div class="control" flex="main:center" style="width: 210px;">
      <el-button @click="playBefore" title="上一首">
        <i class="iconfont icon-shangyishou"></i>
      </el-button>
      <el-button @click="playClick" :title="isPlay ? '暂停': '播放' ">
        <!-- 播放中 -->
        <i class="iconfont icon-zanting" v-if="isPlay"></i>
        <i class="iconfont icon-bofang" v-else></i>
      </el-button>
      <el-button @click="playAfter" title="下一首">
        <i class="iconfont icon-xiayishou"></i>
      </el-button>
    </div>
    <div class="cover">
      <img class="cover-image" :src="cover" />
      <audio v-show="false" ref="audio" v-if="playUrl" :src="playUrl.url" preload @ended="playAfter()"/>
    </div>
    <div class="tone">
      <el-dropdown trigger="click" placement="top">
        <span class="tone-dropdown">
          标准
          <i class="el-icon-arrow-up el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="width: 220px">
          <el-dropdown-item>
            <div class="flex-c-l">
              <div class="check" style="width: 30px">
                <i class="el-icon-check" style="color: #31c27c;"></i>
              </div>
              <span>标准品质</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div class="flex-c-l">
              <div class="check" style="width: 30px"></div>
              <span>HQ高品质</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div class="flex-c-l">
              <div class="check" style="width: 30px"></div>
              <span>SQ无损品质</span>
              <img src="~@/assets/images/svip.png" style="margin-left: 5px; width: 22px" />
              <img src="~@/assets/images/sui.png" style="margin-left: 5px; width: 22px" />
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="mt-10" trigger="click" placement="top" size="medium">
        <span class="tone-dropdown">
          音效
          <i class="el-icon-arrow-up el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="width: 200px">
          <el-dropdown-item>关闭</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="info" flex-box="1" flex="main:center dir:top">
      <div class="top" flex="main:justify">
        <div class="names">
          <div>
            <span class="name">{{name}}</span>
            <span class="ar_name" v-if="arName">- {{arName}}</span>
          </div>
        </div>
        <div class="time">{{playTime*1000|formatDuring}} / {{song.dt|formatDuring}}</div>
      </div>
      <div class="progress">
        <el-slider
          :show-tooltipss="true"
          v-model="playTime"
          input-size="mini"
          :min="0"
          :max="song.dt/1000"
          @change="playTimeChange"
        ></el-slider>
      </div>
    </div>
    <div class="actions" flex="main:justify" style="width:200px;">
      <el-button type="text">
        <i class="iconfont icon-xiai"></i>
      </el-button>
      <el-button type="text">
        <i class="iconfont icon-liebiaoxunhuan"></i>
      </el-button>
      <el-button type="text">
        <i class="iconfont icon-shengyin"></i>
      </el-button>
      <el-popover placement="top-start" width="300" popper-class="ls" trigger="click">
        <playlist ref="playlist" />
        <el-button type="text" @click.native="showPlaylist" slot="reference">
          <i class="iconfont icon-liebiao"></i>
        </el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
import playlist from '../Playlist'
export default {
  components: {
    playlist
  },
  data() {
    return {
      audio: null,
      timer: null,
      playTime: 0,
      playTimeCount: 0,
      playType: 1 //播放次序 0单曲循环 1列表循环 2随机播放
    }
  },
  computed: {
    playList() {
      return this.$store.state.player.list
    },
    isPlay() {
      return this.$store.state.player.isPlay
    },
    // 歌曲
    song() {
      return this.$store.state.player.song
    },
    musicUrls() {
      return this.$store.state.player.musicUrls
    },
    cover() {
      try {
        return this.song.al.picUrl
      } catch (e) {
        return 'http://p1.music.126.net/dPn_6T9d5VUuCDvhJdZ_8A==/109951163399691488.jpg'
      }
    },
    name() {
      try {
        return this.song.name || '土狗音乐，畅听无限'
      } catch (e) {
        return '土狗音乐，畅听无限'
      }
    },
    arName() {
      try {
        return this.song.ar[0].name
      } catch (e) {
        return false
      }
    },
    playUrl() {
      return this.musicUrls[0] || false
    },
    currentTime() {
      return this.$store.state.player.currentTime
    },
    beforeSong() {
      let s_index = -1
      this.playList.map((item, index) => {
        if (this.song.id === item.id && index > 0) {
          s_index = index - 1
        }
      })
      return s_index >= 0 ? this.playList[s_index] : false
    },
    afterSong() {
      let s_index = -1
      this.playList.map((item, index) => {
        if (this.song.id === item.id && index < this.playList.length - 1) {
          s_index = index + 1
        }
      })
      return s_index >= 0 ? this.playList[s_index] : false
    }
  },
  watch: {
    isPlay(val) {
      try {
        this.$nextTick(() => {
          this.audio = this.$refs['audio']
          if (val) {
            this.audio.play()
            this.maxTime = this.audio.duration
            this.getPlayTime()
            this.audio.addEventListener('ended', () => {
              this.playEnd()
            })
          } else {
            this.audio.pause()
            clearInterval(this.timer)
          }
        })
      } catch (e) {
        console.log('play error: ', e)
      }
    },
    currentTime(val) {
      this.playTime = val
    }
  },
  methods: {
    prePlay() {
      alert('sdfds')
    },
    //播放/暂停按钮点击
    playClick() {
      this.$store.commit('SET_PLAYER_DATA', { isPlay: !this.isPlay })
    },
    //获取当前已播放时间
    getPlayTime() {
      this.timer = setInterval(() => {
        this.$store.commit('SET_PLAYER_DATA', {
          currentTime: this.audio.currentTime
        })
      }, 1000)
    },
    //改变播放时间
    playTimeChange(val) {
      this.audio.currentTime = val
      this.$store.commit('SET_PLAYER_DATA', { currentTime: val })
    },
    //播放结束事件
    playEnded() {
      switch (this.play_type) {
        case 0:
          this.rePlay()
          break
        case 1:
          this.playAfter()
          break
      }
    },
    //重新播放
    rePlay() {
      this.$store.commit('SET_PLAYER_DATA', { isPlay: false, currentTime: 0 })
      setTimeout(() => {
        this.$store.commit('SET_PLAYER_DATA', { isPlay: true })
      }, 1000)
    },
    playBefore() {
      if (this.beforeSong) {
        this.$store.dispatch('playMusic', this.beforeSong.id)
      }
    },
    playAfter() {
      console.log(this.afterSong)
      if (this.afterSong) {
        this.$store.dispatch('playMusic', this.afterSong.id)
      }
    },
    // 弹出播放列表
    showPlaylist() {
      // this.$emit('showPlaylist')
      this.$refs['playlist'].popupPlayList()
    }
  }
}
</script>

<style lang="scss">
$height: 70px;
.footer-view {
  .el-button {
    padding: 0;
    border: none;
    background-color: transparent;
  }
  .control {
    .el-button {
      border-radius: 50%;
      height: 35px;
      width: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      i,
      span {
        display: block;
      }
      i {
        // font-size: 24px;
        font-size: 18px;
      }
      background-color: var(--primary);
      color: #ffffff;
      // color: var(--primary);
    }
  }

  .cover {
    width: $height;
    height: $height;
    display: flex;
    align-items: center;
    justify-content: center;
    .cover-image {
      width: $height - 20px;
      height: $height - 20px;
      border-radius: 2px;
    }
  }
  /deep/ .tone {
    width: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    .el-dropdown {
      width: 35px;
      border: 1px solid #999;
      font-size: 10px;
      color: #333;
      padding: 1px 5px;
      border-radius: 2px;
      cursor: pointer;
      i {
        font-size: 10px;
      }
    }
    .el-dropdown:hover {
      color: #31c27c;
      border: 1px solid #31c27c;
    }
  }
  .info {
    height: $height;
    .top {
      font-size: 13px;
      color: #666;
      .names {
        font-size: 13px;
        color: #444;
      }
      .time {
        font-size: 12px;
        color: #999;
      }
    }
    .progress {
      margin-top: 10px;
      /deep/ .el-progress {
        box-sizing: content-box;
        * {
          box-sizing: content-box;
        }
        .el-progress-bar__outer {
          border-radius: 0;
        }
        .el-progress-bar__inner {
          border-radius: 0;
        }
      }
      /deep/ .el-slider {
        box-sizing: content-box;
        * {
          box-sizing: content-box;
        }
        .el-slider__runway {
          height: 2px;
          margin: 2px 0;
        }
        .el-slider__bar {
          height: 2px;
        }
        .el-slider__button-wrapper {
          width: 6px;
          height: 6px;
          top: -9px;
        }
        .el-slider__button {
          width: 2px;
          height: 2px;
        }
      }
    }
  }
  .actions {
    padding: 0 20px;
    button {
      color: #333;
    }
    button:hover {
      color: var(--primary);
    }
  }
}
</style>